<template>
  <div class="customer-service">
    <van-icon  style="margin-left: -350px;margin-top: 10px" name="arrow-left" @click="goBack" />

    <!-- 顶部导航栏 -->
    <van-nav-bar title="客服" @click-left="goBack" />

    <div class="content">
      <div class="icon-section">
        <van-image
            src="https://zhengfeixiang.oss-cn-beijing.aliyuncs.com/user/2024/12/10/998e92ef05d94eaaba9af4886c5924ac.webp"
        width="100"
        height="100"
        />
      </div>
      <p>如果您有任何问题，可以联系我们！</p>

      <div class="contact-info">
        <van-cell
            title="电话"
            :value="phoneNumber"
            is-link
            @click="callPhone"
        />
        <van-cell
            title="邮箱"
            :value="email"
            is-link
            @click="copyEmail"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomerServiceView',
  data() {
    return {
      phoneNumber: '+86 15378757498',
      email: '759968879@qq.com'
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一页
    },
    callPhone() {
      // 处理拨打电话的逻辑
      window.location.href = `tel:${this.phoneNumber}`;
    },
    copyEmail() {
      // 复制邮箱到剪贴板
      navigator.clipboard.writeText(this.email).then(() => {
        this.$toast({ message: "邮箱已复制" });
      });
    }
  }
}
</script>

<style scoped>
.customer-service {
  background-color: #f7f8fa;
  min-height: 100vh;
  padding: 16px;
  text-align: center;
}

.icon-section {
  margin-bottom: 20px;
}

.contact-info {
  margin-top: 20px;
}
</style>